import { defineComponent, h, ref, onMounted } from 'vue'
import type { DataTableColumns } from 'naive-ui'
import type { Ref } from 'vue'
import { NButton, NDataTable, NSpin, NPagination, NImage } from 'naive-ui'
import reportApi from '@/service/api/yang/operation/report'
import pageStyle from '@/theme/common.module.scss'
import MessageBox from '@/components/nComponents/MessageBox'
import { useApi } from '@/hooks/useApi'
import Edit from './components/Edit'
export default defineComponent({
  name: 'FormList',
  setup() {
    /**
     *  列表
     * */
    const columns: DataTableColumns<any> = [
      {
        title: '类型',
        key: 'types',
        width: 200
      },
      {
        title: '内容',
        key: 'content',
        ellipsis: {
          tooltip: true
        }
      },
      {
        title: '图片',
        key: 'img',
        render(row) {
          return h(NImage, {
            src: row.img,
            width: '80',
            style: {
              borderRadius: '10px'
            }
          })
        }
      },
      {
        title: '联系方式',
        key: 'contact'
      },
      {
        title: '关联类型',
        key: 'typeName'
      },
      {
        title: '关联id',
        key: 'assicton'
      },
      {
        title: '举报时间',
        key: 'create_at'
      },
      {
        title: '举报用户',
        key: 'userInfo',
        children: [
          {
            title: '头像',
            key: 'userInfo.avatar'
          },
          {
            title: '昵称',
            key: 'userInfo.nickname'
          }
        ]
      }
    ]
    const getData = async (params: any): Promise<any> => {
      const { data } = await reportApi.list(params)
      const typeEnum = {
        EXCHANGE: '资源',
        TOPIC: '帖子',
        IMGINFO: '图集',
        IMGROW: '图片',
        VIDEO: '视频'
      }
      data.data.map(el => {
        el.typeName = typeEnum[el.type]
        return el
      })
      return data
    }
    const addRef: Ref<any> = ref()
    const { tableInfo, pageChange, sizeChange, fetchData, handAdd } = useApi({
      addRef,
      getData,
      initForm: {
        name: ''
      }
    })

    onMounted(() => {
      fetchData()
    })

    return () => (
      <>
        <div class={pageStyle.pageBasic}>
          <div class="pageBasic-main">
            <div class="pb20">
              <NButton type="success" onClick={() => handAdd()}>
                <i class="esayIcon esayIcon-tianjiawenjianjia"></i>
                <span class="ml-[10px]">添加</span>
              </NButton>
            </div>
            <NDataTable
              loading={tableInfo.listLoading}
              columns={columns}
              data={tableInfo.tableData}
              pagination={false}
            />
            <div class={pageStyle.pagination}>
              <NPagination
                v-model:page={tableInfo.queryForm.pageNo}
                page-count={tableInfo.total}
                page-sizes={tableInfo.pageSizes}
                show-quick-jumper
                show-size-picker
                onUpdatePage={pageChange}
                onUpdatePageSize={sizeChange}
              />
            </div>
          </div>
          <Edit ref={addRef} onSuccess={fetchData} />
        </div>
      </>
    )
  }
})
